<template>
    <div class="home">
        <h3>State测试</h3>
        <div>
            <p>原始:{{ a }}</p>
            <p>两倍:{{ $store.getters.doubleA }}----{{ doubleA }}</p>
            <p>三倍:{{ $store.getters.tripleA  }}----{{ tripleA }}</p>
            <button @click="addA()">addA</button>
            <hr>
            <p>原始:{{ b }}</p>
            <p>两倍:{{ $store.getters.doubleB }}----{{ doubleB }}</p>
            <p>三倍:{{ $store.getters.tripleB  }}----{{ tripleB }}</p>
            <button @click="addB(2)">addB</button>
            <hr>
            <button @click="addBoth({m:1,n:2})">addBoth</button>
            <hr>
            <p>(a+b)*2: {{ doubleBoth }}</p>
            <p>(a+b)*N: {{ bothN(10) }}</p>
        </div>

    </div>
</template>

<script>
import { mapState,mapMutations,mapGetters } from "vuex";

export default {
    name: 'OtherView',
    data() {
        return {
            count: 10,
        }
    },
    methods:{
        ...mapMutations(["addA","addB","addBoth"])
    },  
    computed: {
        // state
        ...mapState(["a","b"]),
        ...mapGetters(["doubleA","tripleA","doubleB","tripleB","doubleBoth","bothN"])
    },
    mounted() {
        console.log(this);
        console.log(this.$store);
        console.log(this.$store.state);
    }
}
</script>
